<template>
  <div class="userAnalysis">
    <!-- 活动统计 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="userStatisticsHead">
        <h3>活动统计</h3>
        <div class="p">
          <p :class="{ activeD: indexA == 1 }" @click="activeAStatusA()">
            今日
          </p>
          <p :class="{ activeD: indexA == 0 }" @click="activeAStatusB()">
            总计
          </p>
        </div>
      </div>
      <!-- 今日 -->
      <div>
        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>男用户活动曝光次数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ exposureMan }}</p>
          </el-card>
          <el-card class="one" style="margin-left: 40px">
            <h4>男用户活动点击次数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ clickMan }}</p>
          </el-card>
          <el-card class="one" style="margin-left: 40px">
            <h4>男用户活动点击人数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ clickManUnique }}</p>
          </el-card>
        </div>

        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>女用户活动曝光次数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ exposureWoMan }}</p>
          </el-card>
          <el-card class="one" style="margin-left: 40px">
            <h4>女用户活动点击次数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ clickWoMan }}</p>
          </el-card>
          <el-card class="one" style="margin-left: 40px">
            <h4>女用户活动点击人数</h4>
            <span>{{ date }}</span>
            <p class="p">{{ clickWoManUnique }}</p>
          </el-card>
        </div>
      </div>
    </el-card>

    <!-- 当前活动点击次数与曝光次数 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="onlineSearchBox">
        <h3>当前活动点击次数与曝光次数</h3>
        <div>
          <span style="color: #9d9fa8">请选择性别</span>
          <el-select v-model="activeCrowdVal" placeholder="活动人群">
            <el-option
              v-for="item in activeCrowdOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <!-- <el-select v-model="sortVal" placeholder="活动人群">
            <el-option
              v-for="item in sortOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->

          <el-button
            class="btn"
            icon="el-icon-search"
            @click="activityanalysisCurrentBtn"
            style="margin-left: 20px"
            >查询搜索</el-button
          >

          <el-button
            class="btn"
            icon="el-icon-download"
            @click="exportExcelA"
            style="margin-left: 20px"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChart" :style="{ width: '100%', height: '500px' }"></div>
    </el-card>

    <!-- 历史活动点击次数与曝光次数 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="onlineSearchBox">
        <h3>历史活动点击次数与曝光次数</h3>
        <div>
          <span style="color: #9d9fa8">请选择用户</span>
          <el-select
            v-model="activityanalysisHistoricalVal"
            placeholder="活动人群"
          >
            <el-option
              v-for="item in activityanalysisHistoricalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-button
            class="btn"
            icon="el-icon-search"
            @click="activityanalysisHistoricalBtn"
            style="margin-left: 20px"
            >查询搜索</el-button
          >

          <el-button
            class="btn"
            icon="el-icon-download"
            @click="exportExcelB"
            style="margin-left: 20px"
            >导出Excel</el-button
          >
        </div>
      </div>

      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="name" label="活动名称"> </el-table-column>
        <el-table-column prop="exposureTimes" label="曝光次数">
        </el-table-column>
        <el-table-column prop="clickTimes" label="点击次数"> </el-table-column>
        <el-table-column prop="number" label="点击人数"> </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  activityanalysisStatistics,
  activityanalysisCurrent,
  activityanalysisHistorical,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  data() {
    return {
      loading: true,
      indexA: 1,
      // 卡片
      date: "",
      exposureMan: "",
      exposureWoMan: "",
      clickMan: "",
      clickWoMan: "",
      clickManUnique: "",
      clickWoManUnique: "",
      //当前活动点击次数与曝光次数
      activeCrowdOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "男用户",
        },
        {
          value: "2",
          label: "女用户",
        },
      ],
      activeCrowdVal: "",
      //排序
      sortOptions: [
        {
          value: "1",
          label: "点击人数降序",
        },
        {
          value: "2",
          label: "点击人数升序",
        },
        {
          value: "3",
          label: "曝光人数降序",
        },
        {
          value: "4",
          label: "曝光人数升序",
        },
      ],
      sortVal: "1",
      //历史活动点击次数与曝光次数
      activityanalysisHistoricalOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "男用户",
        },
        {
          value: "2",
          label: "女用户",
        },
      ],
      activityanalysisHistoricalVal: "",

      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //活动统计卡片
    activityanalysisStatistics() {
      activityanalysisStatistics({
        date: this.indexA, //1.今日 0.总计
      }).then((res) => {
        if (res.code == 0) {
          this.date = res.data.date;
          this.exposureMan = res.data.exposureMan;
          this.exposureWoMan = res.data.exposureWoMan;
          this.clickMan = res.data.clickMan;
          this.clickWoMan = res.data.clickWoMan;
          this.clickManUnique = res.data.clickManUnique;
          this.clickWoManUnique = res.data.clickWoManUnique;
        }
      });
    },

    //当前活动点击次数与曝光次数
    activityanalysisCurrent() {
      activityanalysisCurrent({
        sex: this.activeCrowdVal, //1是男  2是女 不传 或者为空 就全部
        sort: this.sortVal,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          // myChart.setOption({
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["曝光次数", "点击次数", "点击人数"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: res.data.name,
          //   },
          //   series: [
          //     {
          //       name: "曝光次数",
          //       type: "bar",
          //       stack: "总量",
          //       data: res.data.exposureTimes,
          //     },
          //     {
          //       name: "点击次数",
          //       type: "bar",
          //       stack: "总量",
          //       data: res.data.clickTimes,
          //     },
          //     {
          //       name: "点击人数",
          //       type: "bar",
          //       stack: "总量",
          //       data: res.data.clickNumber,
          //     },
          //   ],
          // });
          var colors = ["#5470C6", "#91CC75", "#EE6666"];
          // 绘制图表
          myChart.setOption({
            color: colors,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
              },
            },
            grid: {
              right: "20%",
            },
            legend: {
              data: ["曝光次数", "点击次数", "点击人数"],
            },
            xAxis: [
              {
                type: "category",
                axisTick: {
                  alignWithLabel: true,
                },
                data: res.data.name,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "曝光次数",
                min: 0,

                position: "right",
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[0],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "点击次数",
                min: 0,

                position: "right",
                offset: 80,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[1],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                name: "点击人数",
                min: 0,

                position: "right",
                offset: 160,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: colors[2],
                  },
                },
                axisLabel: {
                  formatter: "{value} ",
                },
              },
            ],
            series: [
              {
                name: "曝光次数",
                type: "bar",
                stack: "总量",
                data: res.data.exposureTimes,
              },
              {
                name: "点击次数",
                type: "bar",
                stack: "总量2",
                data: res.data.clickTimes,
                yAxisIndex: 1,
              },
              {
                name: "点击人数",
                type: "bar",
                stack: "总量1",
                data: res.data.clickNumber,
                yAxisIndex: 2,
              },
            ],
          });
        }
      });
    },

    //当前活动点击次数与曝光次数 搜索
    activityanalysisCurrentBtn() {
      this.activityanalysisCurrent();
      // activityanalysisCurrent({
      //   sex: this.activeCrowdVal, //1是男  2是女 不传 或者为空 就全部
      //   sort: this.sortVal,
      // }).then((res) => {
      //   if (res.code == 0) {
      //     // 基于准备好的dom，初始化echarts实例
      //     let myChart = this.$echarts.init(document.getElementById("myChart"));
      //     // 绘制图表
      //     myChart.setOption({
      //       tooltip: {
      //         trigger: "axis",
      //         axisPointer: {
      //           type: "shadow",
      //         },
      //       },
      //       legend: {
      //         data: ["曝光次数", "点击次数", "点击人数"],
      //       },
      //       grid: {
      //         left: "3%",
      //         right: "4%",
      //         bottom: "3%",
      //         containLabel: true,
      //       },
      //       xAxis: {
      //         type: "value",
      //       },
      //       yAxis: {
      //         type: "category",
      //         data: res.data.name,
      //       },
      //       series: [
      //         {
      //           name: "曝光次数",
      //           type: "bar",
      //           stack: "total",
      //           data: res.data.exposureTimes,
      //         },
      //         {
      //           name: "点击次数",
      //           type: "bar",
      //           stack: "total",
      //           data: res.data.clickTimes,
      //         },
      //         {
      //           name: "点击人数",
      //           type: "bar",
      //           stack: "total",
      //           data: res.data.clickNumber,
      //         },
      //       ],
      //     });
      //   }
      // });
    },

    //历史活动点击次数与曝光次数
    activityanalysisHistorical() {
      this.loading = true;
      activityanalysisHistorical({
        sex: this.activityanalysisHistoricalVal, //1是男  2是女 不传 或者为空 就全部
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    //历史活动点击次数与曝光次数 搜索
    activityanalysisHistoricalBtn() {
      this.loading = true;

      activityanalysisHistorical({
        sex: this.activityanalysisHistoricalVal, //1是男  2是女 不传 或者为空 就全部
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    //分页
    getList() {
      this.loading = true;

      activityanalysisHistorical({
        sex: this.activityanalysisHistoricalVal, //1是男  2是女 不传 或者为空 就全部
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    //今日
    activeAStatusA() {
      this.indexA = 1;
      activityanalysisStatistics({
        date: this.indexA, //1.今日 0.总计
      }).then((res) => {
        if (res.code == 0) {
          this.date = res.data.date;
          this.exposureMan = res.data.exposureMan;
          this.exposureWoMan = res.data.exposureWoMan;
          this.clickMan = res.data.clickMan;
          this.clickWoMan = res.data.clickWoMan;
          this.clickManUnique = res.data.clickManUnique;
          this.clickWoManUnique = res.data.clickWoManUnique;
        }
      });
    },
    //总计
    activeAStatusB() {
      this.indexA = 0;
      activityanalysisStatistics({
        date: this.indexA, //1.今日 0.总计
      }).then((res) => {
        if (res.code == 0) {
          this.date = res.data.date;
          this.exposureMan = res.data.exposureMan;
          this.exposureWoMan = res.data.exposureWoMan;
          this.clickMan = res.data.clickMan;
          this.clickWoMan = res.data.clickWoMan;
          this.clickManUnique = res.data.clickManUnique;
          this.clickWoManUnique = res.data.clickWoManUnique;
        }
      });
    },

    // 导出-当前活动点击次数与曝光次数
    exportExcelA() {
      activityanalysisCurrent({
        sex: this.activeCrowdVal, //1是男  2是女 不传 或者为空 就全部
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.exposureTimes.length; i++) {
              var arr = {};
              arr = {
                name: res.data.name[i],
                exposureTimes: res.data.exposureTimes[i],
                clickTimes: res.data.clickTimes[i],
                clickNumber: res.data.clickNumber[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel");
            const tHeader = ["名称", "曝光次数", "点击次数", "点击人数"];
            const filterVal = [
              "name",
              "exposureTimes",
              "clickTimes",
              "clickNumber",
            ];
            const list = array;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "当前活动点击次数与曝光次数");
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    // 导出-历史活动点击次数与曝光次数
    exportExcelB() {
      activityanalysisHistorical({
        sex: this.activityanalysisHistoricalVal,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel");
            const tHeader = ["活动名称", "曝光次数", "点击次数", "点击人数"];
            const filterVal = ["name", "exposureTimes", "clickTimes", "number"];
            const list = res.data.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "历史活动点击次数与曝光次数");
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  created() {
    this.activityanalysisStatistics();
    this.activityanalysisCurrent();
    this.activityanalysisHistorical();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;

  .userStatisticsBox {
    margin-bottom: 30px;
    .userStatisticsHead {
      display: flex;
      justify-content: space-between;
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
        .activeD {
          background-color: #0079fe;
          color: #fff;
          border-radius: 10px;
        }
      }
    }
    h3 {
      font-size: 30px;
      margin: 0px;
    }
    .todaySpan {
      margin-top: 20px;
      display: inline-block;
    }
    .userStatisticsItem {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 40px;
      .one {
        width: 280px;
        h4 {
          margin: 0px;
          font-size: 20px;
          margin-bottom: 10px;
        }
        .numSpan {
          font-size: 28px;
        }
        .p {
          margin: 10px 0px 0px 0px;
          font-size: 24px;
          font-weight: bold;
        }
      }
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        p {
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .p {
        display: flex;
        p {
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .activeC {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .el-button {
        margin-left: 20px;
      }
    }
    .onlineSearchBox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .el-select {
        margin-left: 20px;
      }
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .onlineCard {
      display: flex;
      width: 66%;
      justify-content: space-between;
      margin: 40px 0px;
      .box {
        width: 300px;
        height: 150px;
      }
    }
  }
}
</style>